<!doctype html>
<html>
	<head>
		<meta  http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>实现那些讨厌的广告滑动效果</title>
		<meta name="Keywords" content="关键词,关键词">
		<meta name="description" content="简介，描述">
		<style type="text/css">
		*{margin:0px;padding:0px;}
		body{font-size:12px;font-family:"微软雅黑";color:#666;}
		/*conent start*/
		.conent{width:90px;height:120px;position:absolute;top:20px;}
		.conent .sition{width:90px;height:120px;position:relative;}
		.conent .sition .c_header{width:90px;text-align:center;cursor:move;}
		.conent .sition .c_header .txt{color:#00CC00;font-weight:600;font-size:15px;line-height:30px;box-shadow:1px 1px 1px 1px #000;text-shadow:1px 1px 1px #000;}
		.conent .sition .c_adver{width:90px;height:90px;background:url("images/back.gif") no-repeat;cursor:pointer;}

		.conent .sition .sign{width:0px;height:10px;border:2px solid #000;display:block;position:absolute;top:27px;left:46px;}
		/*end conent*/
		/*data start*/
		.data{width:260px;height:130px;margin:255px auto;color:#036;}
		.data p{line-height:20px;}
		.data p .high{color:red;}
		.data p .dispaly{color:#00F;}
		/*end data*/
		</style>
	</head>
<body>
<!--conent start-->
<div class="conent">
	<div class="sition">
		<div class="c_header"><strong class="txt">杜绝广告</strong></div>
		<div class="c_adver"></div>
		<i class="sign"></i>
	</div>
</div>
<!--end conent-->
<!--data start-->
<div class="data">
	<p>浏览器总<span class="high">高度</span>为：<span class="dispaly" id="liulan">0px</span></p>
	<p>拖动时元素距浏览器顶部<span class="high">高度</span>为；<span class="dispaly" id="text">0px</span></p>
	<p>当前元素距浏览器动态<span class="high">高度</span>为；<span class="dispaly" id="textone"></span></p>
	<p>浏览器总<span class="high">宽度</span>为：<span class="dispaly" id="sumwid">0px</span></p>
	<p>拖动时元素距浏览器顶部<span class="high">宽度</span>为；<span class="dispaly" id="dywid">0px</span></p>
	<p>当前元素距浏览器动态<span class="high">宽度</span>为；<span class="dispaly" id="timewid"></span></p>
	<p>双击小熊可 remove</p>
</div>
<!--end data-->
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">

	$(function(){
		var timer=null;/*定时器*/
		var _left=0;/*默认left距离*/
		var _top=20;/*默认top距离*/
		var top_folg=false;/*控制高度-锁*/
		var left_folg=true;/*控制宽度-锁*/
		var win_width=$(window).width()-$(".conent").width();/*获取并计算浏览器初始宽度*/
		var win_height=$(window).height()-$(".conent").height();/*获取并计算浏览器初始高度*/
		$("#liulan").html(win_height+"px");
		$("#sumwid").html(win_width+"px");;
		action();/*执行走动*/
		$(".conent").mouseover(function(){
			clearInterval(timer);
			$(this).find(".c_adver").css({"background":"url('images/no.gif')","bakcground-repeat":"no-repeat"});
			$(this).find(".txt").text("放开我!!!");

		}).mouseout(function(){
			action();
			$(this).find(".txt").text("杜绝广告");
			$(this).find(".c_adver").css({"background":"url('images/back.gif')","bakcground-repeat":"no-repeat"});
		});

		$(window).resize(function(){
			conobj=$(".conent");
			win_width=$(window).width()-conobj.width();
			win_height=$(window).height()-conobj.height();
			$("#liulan").html(win_height+"px");
			$("#sumwid").html(win_width+"px");;
		});

		function action(){
			timer=setInterval(function(){
				if(!top_folg){
					_top++;
					if(_top>=win_height){top_folg=true;};
				}else{
					_top--;
					if(_top<=0){top_folg=false;};
				};
				if(left_folg){
					 _left++;
					if(_left>=win_width){left_folg=false;};
				}else{
					_left--;
					if(_left<=0){left_folg=true;};
				};
                $("#textone").html(_top+"px");
				$("#timewid").html(_left+"px");
				$(".conent").animate({
					left:_left,
					top:_top
				},3);
			},15);
		};

		$(".conent .c_adver").dblclick(function(){
			$(this).parents(".conent").slideUp(500,function(){
				$(this).remove();
				clearInterval(timer);
			});
		});

		var state;/*拖动锁*/
		$(".c_header").mousedown(function(event){
		state=false;
		var x=event.clientX;
		var y=event.clientY;
		var obj=$(this).parents(".conent");
		var c_left=obj.offset().left;
		var c_top=obj.offset().top;
				$(document).mousemove(function(e){
					if(!state){
						  var x1=e.clientX;
						  var y1=e.clientY;
						  var action_left=x1-x+c_left;
						  var action_top=y1-y+c_top;
						  if(action_left<=0){action_left=0;};
						  if(action_top<=0){action_top=0;}
						  if(action_left>=win_width){action_left=win_width;};
						  if(action_top>=win_height){action_top=win_height;};
						  obj.css({top:action_top,left:action_left});
						  _left=action_left;
						  _top=action_top;
						  $("#text").html(_top+"px");
						  $("#dywid").html(_left+"px");
						};
				}).mouseup(function(){
					state=true;
				});
		});
	});
</script>
</body>
</html>